<!-- subpkg_consult/department/index.vue -->
<script lang="ts" setup>
import { departmentListApi } from '@/apis/consult';
import type { DepartData } from '@/types/consult';
import { computed, ref } from 'vue';

const props = defineProps<{
  type: string
  illnessType: string
}>()
// console.log(JSON.stringify(props));

const departmentList = ref<DepartData[]>([])

// 获取科室列表
async function getDepartmentList() {
  const res = await departmentListApi()
  departmentList.value = res
}
getDepartmentList()

// 选择科室下标
const activeIndex = ref(0)
const changeAcvite = (index: number) => {
  activeIndex.value = index
}
// 二级科室
const childList = computed(() => departmentList.value[activeIndex.value]?.child)
</script>

<template>
  <view class="department-page">
    <scroll-view scroll-y class="department-primary">
      <view class="department-item" :class="{ active: activeIndex === index }" v-for="(item, index) in departmentList"
        :key="item.id" @click="changeAcvite(index)">{{ item.name }}</view>
    </scroll-view>
    <scroll-view class="department-secondary">
      <navigator hover-class="none" :url="`/subpkg_consult/description/index?type=${type}&illnessType=${illnessType}&depId=${item.id}`" class="department-item"
        v-for="item in childList" :key="item.id">
        {{ item.name }}
      </navigator>
    </scroll-view>
  </view>
</template>

<style lang="scss">
@import './index.scss';
</style>